<template>
	<view class="details">
		<view class="details-field">
			<van-cell-group>
			  <van-cell
				title="活动名称"
				:value="details.name"
			  />
			  <van-cell
				title="已购买数量"
				:value="details.aprice"
			  />
			  <van-cell
				v-if="details.nums"
				title="赠送BHT资产数量"
				:value="details.nums"
			  />
			  <van-cell
				v-if="details.cnums"
				title="赠送合约数量"
				:value="details.cnums"
			  />
			   <van-cell
				v-if="details.gkprice"
				title="赠送BHT数量"
				:value="details.gkprice"
			  />
			  <van-cell
				title="赠送剩余数量"
				:value="details.pnums"
			  />
			  <van-cell
				title="开始时间"
				:label="details.startTimeStr"
			  />
			  <van-cell
				title="结束时间"
				:label="details.endTimeStr"
				:border="false"
			  />
			</van-cell-group>
		</view>
		<view class="details-btn">
			<button class="base-btn" :class="{btnNo: !btnNo}" @tap="onSubmit">领取奖励</button>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			btnNo: false,
			loading: false
		};
	},
	computed: {
		...mapGetters({
			details: 'gteActivityDetails'
		})
	},
	onShow () {
		this.btnNo = this.details.price <= this.details.aprice
	},
	methods: {
		onSubmit () {
			if (!this.btnNo) {
				uni.showToast({
					title: '领取条件未达到', 
					icon: 'none'
				});
				return
			}
			if (this.loading) return
			uni.showLoading({ title: '' });
			this.loading = true
			this.$http.getActivityAward({id: this.details.id}).then(res => {
				this.loading = false
				const data = res.data
				if (data.success) {
					uni.showToast({
						title: '奖励领取成功'
					});
					this.details.aprice = Number(this.details.aprice) - Number(this.details.price)
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		}
		
	}
};
</script>

<style lang="scss" scoped>
	.details {
		padding: 40upx 0;
		&-field {
			margin-bottom: 40upx;
			&-pwd{margin-bottom: 20upx;}
		}
		&-btn {
			padding: 40upx 60upx;
			.btnNo {
				color: #9b9b9b;
				background-color: #e6e6e6;
			}
		}
	}
</style>
